var vie_cars = vie_fwk_base_page.extend({
    initialize: function(options){
        this.initVars(options);
        this.pageHeadModel.setToolbarId(this.getContainerId());
        $('a#current-section').html('Cars');
        if(this.options.car != null){
            this.pageHeadModel.set('title', 'View Car');
            this.pageHeadModel.set('description', '');
            this.collection = __app.colls.cars.where({id:this.options.car});
        }else{
            this.pageHeadModel.set('title', '');
            this.pageHeadModel.set('description', '');
            this.collection = __app.colls.cars;
            this.collection.bind('add create', this.addItem, this);
        }
        this.pageHeadModel.addButton('icon-plus', 'Add A Car', '#cars/edit');
    },
    render: function(){
        this.pageBody = new vie_cars_list({collection: this.collection});
        this.displayToMain();
        var that = this;
        return this;
    },
    addItem: function(car){
        this.pageBody.addItem(car);
    } 
});

var vie_cars_list = vie_fwk_base_list.extend({
    attributes: {
        id: 'cars-list'
    },
    initialize: function(){
        
    },
    render: function(){
        $(this.el).html('');
        this.listItemView = vie_car;
        this.renderList();
        return this;    
    },
    addItem: function(model){
        var listItemView = new this.listItemView({model: model});
        this.listItemViews[model.get('id')] = listItemView;
        $(this.el).prepend(listItemView.render().el)
    }
});

var vie_car = vie_fwk_base.extend({
    tagName: 'li',
    className: 'span4',
    attributes: {},
    events: {
        "click a": "actionRequest",
        'click button': 'toggleIcon'
    },
    delUrl: null,
    editUrl: null,
    template: null,
    initialize: function(){
        this.model.bind('change', this.render, this);
        this.model.bind('destroy', this.destroy_view, this);
        this.template = _.template(templateLoader.templates['tpl-item']);
        this.dateFormat = 'ddd mmm dd yyyy';
    },
    toggleIcon: function(ev){
        var icon = $(ev.currentTarget).find('i');
        icon.toggleClass('icon-plus');
        icon.toggleClass('icon-minus');
    },
    setEditUrl: function(){
        this.editUrl = '#cars/edit/' + this.model.get('id');
    },
    setDelUrl: function(){
        this.delUrl = '#cars/remove/' + this.model.get('id');
    },
    render: function(){
        this.setDelUrl();
        this.setEditUrl();
        $(this.el).attr('id', 'cars-list-item-' + this.model.get('id'));
        var modelJSON = this.model.toJSON();
        var itemData = {
            //image: {src: 'img/260x180.gif', alt: 'placeholder'},
            heading: this.model.get('name'),
            body: this.getCarBody(),
            buttons: new Array()
        };
        itemData.buttons.push({
            label: 'edit',
            url: this.editUrl
        });
        itemData.buttons.push({
            label: 'delete',
            url: this.delUrl
        });
        
        $(this.el).html(this.template(itemData));
        return this;
    },
    getCarBody: function(){
            // 'cowl' : 'generic',
            // 'note' : '',
            // 'wheelsFrontMeasure' : "0.00",
            // 'wheelsRearMeasure' : "0.00",
            // 'gear' : '5-1',
            // 'engine' : 'atomic',
            // 'brakes' : 'hard',
            // 'status': 'ready-to-race',
            // 'races': new Array(),
            // 'dateCreate' : new Date().getTime(),
            // 'dateMod' : new Date().getTime(),
            // //TODO: add this
            // 'components': new Array()
        var dateMod = new Date(this.model.get('dateMod')).format(this.dateFormat);
        var dateCreate = new Date(this.model.get('dateCreate')).format(this.dateFormat);
        //var carBody = '<p>Status: ' + this.model.get('status').label + ' "' + this.model.get('status').desc + '"</p>';
        var carBody = '<p>Cowl: ' + this.model.get('cowl') + '</p>';
        carBody += '<button type="button" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#details-'+this.model.get('id')+'">';
        carBody += '<i class="icon-plus"></i>details';
        carBody += '</button>';
        carBody += '<div id="details-'+this.model.get('id')+'" class="collapse">'
            carBody += '<table class="table table-striped">';
                carBody += '<tbody>';
                    // carBody += '<tr>';
                        // carBody += '<td>';
                            // carBody += 'cowl:';
                        // carBody += '</td>';
                        // carBody += '<td>';
                            // carBody += this.model.get('cowl');
                        // carBody += '</td>';
                    // carBody += '</tr>';
                    
                    carBody += '<tr>';
                        carBody += '<td>';
                            carBody += 'engine:';
                        carBody += '</td>';
                        carBody += '<td>';
                            carBody += '<p>' + this.model.get('engine').label + '</p>';
                            carBody += '<p>' + this.model.get('engine').desc + '</p>';
                        carBody += '</td>';
                    carBody += '</tr>';
                    
                    carBody += '<tr>';
                        carBody += '<td>';
                            carBody += 'gear:';
                        carBody += '</td>';
                        carBody += '<td>';
                            carBody += '<p>' + this.model.get('gear').label + '</p>';
                            carBody += '<p>' + this.model.get('gear').desc + '</p>';
                        carBody += '</td>';
                    carBody += '</tr>';
                    
                    carBody += '<tr>';
                        carBody += '<td>';
                            carBody += 'brakes:';
                        carBody += '</td>';
                        carBody += '<td>';
                            carBody += '<p>' + this.model.get('brakes').label + '</p>';
                            carBody += '<p>' + this.model.get('brakes').desc + '</p>';
                        carBody += '</td>';
                    carBody += '</tr>';
                    
                    carBody += '<tr>';
                        carBody += '<td>';
                            carBody += 'notes:';
                        carBody += '</td>';
                        carBody += '<td>';
                            carBody += this.model.get('note');
                        carBody += '</td>';
                    carBody += '</tr>';
                    
                    carBody += '<tr>';
                        carBody += '<td>';
                            carBody += 'status:';
                        carBody += '</td>';
                        carBody += '<td>';
                            carBody += '<p>' + this.model.get('status').label + '</p>';
                        carBody += '</td>';
                    carBody += '</tr>';
                    
                    // carBody += '<tr>';
                        // carBody += '<td>';
                            // carBody += 'created:';
                        // carBody += '</td>';
                        // carBody += '<td>';
                            // carBody += dateCreate;
                        // carBody += '</td>';
                    // carBody += '</tr>';
                     
                    // carBody += '<tr>';
                        // carBody += '<td>';
                            // carBody += 'updated:';
                        // carBody += '</td>';
                        // carBody += '<td>';
                            // carBody += dateMod;
                        // carBody += '</td>';
                    // carBody += '</tr>';
                carBody += '</tbody>';
            carBody += '</table>';
        carBody += '</div>';
        return carBody;
    },
    actionRequest: function(ev){
        if($(ev.currentTarget).attr('href') == this.delUrl){
            //temporary
            return confirm('are you sure you want to delete this car?');
                
        }
    }
});